<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LDMS - 自动化仓储物流数据分析系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="app-container">
        <!-- 侧边导航栏 -->
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>LDMS系统</h2>
            </div>
            <div class="sidebar-menu">
                <div class="menu-group">
                    <div class="menu-group-title">主要功能</div>
                    <div class="menu-item active" data-page="dashboard">
                        <i class="fas fa-tachometer-alt"></i>
                        <span class="menu-text">系统概览</span>
                    </div>
                </div>

                <div class="menu-group">
                    <div class="menu-group-title">订单域</div>
                    <div class="menu-item" data-page="inbound-orders">
                        <i class="fas fa-sign-in-alt"></i>
                        <span class="menu-text">入库订单信息</span>
                    </div>
                    <div class="menu-item" data-page="inbound-tracking">
                        <i class="fas fa-map-marker-alt"></i>
                        <span class="menu-text">入库订单跟踪</span>
                    </div>
                    <div class="menu-item" data-page="outbound-orders">
                        <i class="fas fa-sign-out-alt"></i>
                        <span class="menu-text">出库订单信息</span>
                    </div>
                    <div class="menu-item" data-page="outbound-tracking">
                        <i class="fas fa-shipping-fast"></i>
                        <span class="menu-text">出库订单跟踪</span>
                    </div>
                    <div class="menu-item" data-page="order-exceptions">
                        <i class="fas fa-exclamation-triangle"></i>
                        <span class="menu-text">订单异常情况</span>
                    </div>
                </div>

                <div class="menu-group">
                    <div class="menu-group-title">设备域</div>
                    <div class="menu-item" data-page="device-management">
                        <i class="fas fa-cogs"></i>
                        <span class="menu-text">设备信息管理</span>
                    </div>
                    <div class="menu-item" data-page="device-status">
                        <i class="fas fa-heartbeat"></i>
                        <span class="menu-text">设备实时状态</span>
                    </div>
                    <div class="menu-item" data-page="device-alerts">
                        <i class="fas fa-bell"></i>
                        <span class="menu-text">设备预警管理</span>
                    </div>
                    <div class="menu-item" data-page="device-maintenance">
                        <i class="fas fa-wrench"></i>
                        <span class="menu-text">设备维修记录</span>
                    </div>
                </div>

                <div class="menu-group">
                    <div class="menu-group-title">综合分析</div>
                    <div class="menu-item" data-page="material-analysis">
                        <i class="fas fa-fire"></i>
                        <span class="menu-text">物料热力识别</span>
                    </div>
                    <div class="menu-item" data-page="warehouse-analysis">
                        <i class="fas fa-warehouse"></i>
                        <span class="menu-text">出入库频次分析</span>
                    </div>
                    <div class="menu-item" data-page="order-analysis">
                        <i class="fas fa-chart-bar"></i>
                        <span class="menu-text">订单状态分析</span>
                    </div>
                    <div class="menu-item" data-page="inventory-analysis">
                        <i class="fas fa-clipboard-check"></i>
                        <span class="menu-text">库存盘点差异</span>
                    </div>
                </div>

                <div class="menu-group">
                    <div class="menu-group-title">其他</div>
                    <div class="menu-item" data-page="alerts-center">
                        <i class="fas fa-exclamation-circle"></i>
                        <span class="menu-text">告警中心</span>
                    </div>
                    <div class="menu-item" data-page="settings">
                        <i class="fas fa-cog"></i>
                        <span class="menu-text">系统设置</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部导航栏 -->
            <div class="header">
                <div class="header-left">
                    <div class="toggle-sidebar">
                        <i class="fas fa-bars"></i>
                    </div>
                    <div class="page-title">系统概览</div>
                </div>
                <div class="header-right">
                    <div class="global-time">
                        <i class="far fa-clock"></i>
                        <span id="current-time">2025-09-13 10:30:45</span>
                    </div>
                    <div class="user-menu">
                        <div class="user-avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <span>管理员</span>
                    </div>
                </div>
            </div>

            <!-- 筛选条件 -->
            <div class="filter-bar">
                <div class="filter-row">
                    <div class="filter-item">
                        <div class="filter-label">时间范围</div>
                        <select class="filter-control">
                            <option>今日</option>
                            <option selected>本周</option>
                            <option>本月</option>
                            <option>自定义</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <div class="filter-label">仓库</div>
                        <select class="filter-control">
                            <option>全部仓库</option>
                            <option>北京仓</option>
                            <option>上海仓</option>
                            <option>广州仓</option>
                            <option>成都仓</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <div class="filter-label">货主</div>
                        <select class="filter-control">
                            <option>全部货主</option>
                            <option>京东自营</option>
                            <option>品牌A</option>
                            <option>品牌B</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <div class="filter-label">渠道</div>
                        <select class="filter-control">
                            <option>全部渠道</option>
                            <option>线上商城</option>
                            <option>线下门店</option>
                            <option>批发渠道</option>
                        </select>
                    </div>
                </div>
                <div class="filter-actions">
                    <button class="btn btn-primary">
                        <i class="fas fa-search"></i> 查询
                    </button>
                    <button class="btn btn-outline">
                        <i class="fas fa-redo"></i> 重置
                    </button>
                    <button class="btn btn-outline">
                        <i class="fas fa-download"></i> 导出
                    </button>
                    <button class="btn btn-outline">
                        <i class="fas fa-save"></i> 保存筛选方案
                    </button>
                </div>
            </div>

            <!-- 指标卡 -->
            <div class="metrics-container">
                <div class="metric-card">
                    <div class="metric-title">入库订单总数</div>
                    <div class="metric-value">1,245</div>
                    <div class="metric-trend trend-up">
                        <i class="fas fa-arrow-up"></i> 12.5% 同比
                    </div>
                </div>
                <div class="metric-card">
                    <div class="metric-title">出库订单总数</div>
                    <div class="metric-value">2,367</div>
                    <div class="metric-trend trend-up">
                        <i class="fas fa-arrow-up"></i> 8.3% 同比
                    </div>
                </div>
                <div class="metric-card">
                    <div class="metric-title">订单准时率</div>
                    <div class="metric-value">96.8%</div>
                    <div class="metric-trend trend-up">
                        <i class="fas fa-arrow-up"></i> 2.1% 环比
                    </div>
                </div>
                <div class="metric-card">
                    <div class="metric-title">设备综合效率</div>
                    <div class="metric-value">87.5%</div>
                    <div class="metric-trend trend-down">
                        <i class="fas fa-arrow-down"></i> 1.2% 环比
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="chart-row" style="display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 20px;">
                <div class="chart-container">
                    <div class="chart-header">
                        <div class="chart-title">出入库订单趋势</div>
                        <div class="chart-actions">
                            <button class="btn btn-outline">日</button>
                            <button class="btn btn-outline">周</button>
                            <button class="btn btn-primary">月</button>
                        </div>
                    </div>
                    <div class="chart-content">
                        <canvas id="orderTrendChart"></canvas>
                    </div>
                </div>

                <div class="chart-container">
                    <div class="chart-header">
                        <div class="chart-title">订单状态分布</div>
                    </div>
                    <div class="chart-content">
                        <canvas id="orderStatusChart"></canvas>
                    </div>
                </div>
            </div>

            <div class="chart-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
                <div class="chart-container">
                    <div class="chart-header">
                        <div class="chart-title">设备运行状态</div>
                    </div>
                    <div class="chart-content">
                        <canvas id="deviceStatusChart"></canvas>
                    </div>
                </div>

                <div class="chart-container">
                    <div class="chart-header">
                        <div class="chart-title">仓库吞吐量排行</div>
                    </div>
                    <div class="chart-content">
                        <canvas id="warehouseRankChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 表格区域 -->
            <div class="table-container">
                <div class="table-header">
                    <div class="table-title">最新入库订单</div>
                    <button class="btn btn-outline">
                        <i class="fas fa-expand-arrows-alt"></i> 查看全部
                    </button>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>入库单号</th>
                            <th>类型</th>
                            <th>货主</th>
                            <th>计划到货</th>
                            <th>状态</th>
                            <th>进度</th>
                            <th>超时(分)</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>IN20250913001</td>
                            <td>采购</td>
                            <td>京东自营</td>
                            <td>2025-09-13 09:00</td>
                            <td><span class="status-badge status-success">上架完成</span></td>
                            <td>100%</td>
                            <td>0</td>
                            <td><button class="btn btn-outline">详情</button></td>
                        </tr>
                        <tr>
                            <td>IN20250913002</td>
                            <td>退供</td>
                            <td>品牌A</td>
                            <td>2025-09-13 10:30</td>
                            <td><span class="status-badge status-warning">收货中</span></td>
                            <td>65%</td>
                            <td>15</td>
                            <td><button class="btn btn-outline">详情</button></td>
                        </tr>
                        <tr>
                            <td>IN20250913003</td>
                            <td>调拨入</td>
                            <td>京东自营</td>
                            <td>2025-09-13 11:15</td>
                            <td><span class="status-badge status-danger">质检异常</span></td>
                            <td>45%</td>
                            <td>32</td>
                            <td><button class="btn btn-outline">详情</button></td>
                        </tr>
                        <tr>
                            <td>IN20250913004</td>
                            <td>采购</td>
                            <td>品牌B</td>
                            <td>2025-09-13 13:20</td>
                            <td><span class="status-badge status-success">到园排队</span></td>
                            <td>20%</td>
                            <td>0</td>
                            <td><button class="btn btn-outline">详情</button></td>
                        </tr>
                        <tr>
                            <td>IN20250913005</td>
                            <td>采购</td>
                            <td>京东自营</td>
                            <td>2025-09-13 14:00</td>
                            <td><span class="status-badge status-warning">月台作业</span></td>
                            <td>35%</td>
                            <td>8</td>
                            <td><button class="btn btn-outline">详情</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="script.js"></script>
</body>
</html>